import { flysel, Flysel, FormJson } from "../plugin/flysel.js"

export function replaceUrl(url) {
    history.replaceState(null, null, url)
}

export const touch = 'ontouchstart' in document
if (touch) document.documentElement.id = 'touch'
export class Retarder {
    _valve
    timeoutId
    time
    constructor(callBack, time, throttle) {
        this.time = time
        this.callBack = callBack
        if (throttle) {
            this.throttle = true
            setInterval(() => {
                this._valve = false
            }, throttle);
        }
    }
    /**重置计时器 */
    reset() {
        if (this.throttle) {
            if (this._valve) return
            this._valve = true
        }
        clearTimeout(this.timeoutId)
        this.timeoutId = setTimeout(this.callBack, this.time);
    }
    /**开始计时 */
    start() {
        if (this.timeoutId) return false
        this.timeoutId = setTimeout(this.callBack, this.time);
        return true
    }
    /**取消计时器 */
    clear() {
        if (!this.timeoutId) return false
        clearTimeout(this.timeoutId)
        this.timeoutId = undefined
        return true
    }
}

export function inputSync(box, select) {
    box.on('input', function () {
        const v = this.value
        this.sibling(select).value = v
    }, {
        entrust: select
    })
}

export class RGBA {
    r = 0
    g = 0
    b = 0
    a = 1
    get hex() {
        let hex = '#' + this.r.toString(16).padStart('0', 2) + this.g.toString(16).padStart('0', 2) + this.b.toString(16).padStart('0', 2)
        if (this.a !== 1) hex += this.a.toString(16).padStart('0', 2)
        return hex
    }
    set hex(src) {
        const c = src.match(RGBA.hexRE)
        if (c) {
            const r = parseInt(c[1], 16)
            const g = parseInt(c[2], 16)
            const b = parseInt(c[3], 16)
            const a = c[4] === '' ? undefined : parseInt(c[4], 16) / 255
            if (this.r !== r) {
                this.r = r
            }
            if (this.g !== g) {
                this.g = g
            }
            if (this.b !== b) {
                this.b = b
            }
            if (a !== undefined && this.a !== a) {
                this.a = a
            }
        }
    }
    get brightness() {
        const { r, g, b } = this
        return 0.3 * r + 0.6 * g + 0.1 * b
    }
    constructor(src) {
        if (src) {
            if (src instanceof HTMLElement) {
                this.fromElement(src)
            } else if (typeof src === 'string') {
                this.fromString(src)
            } else if (typeof src === 'object') {
                this.fromObject(src)
            }
        }
    }
    setColor(r, g, b, a) {
        if (r !== undefined) {
            this.r = +r
        }
        if (g !== undefined) {
            this.g = +g
        }
        if (b !== undefined) {
            this.b = +b
        }
        if (a !== undefined) {
            this.a = +a
        }
    }
    toString(rgba) {
        return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a})`
    }
    merge(...src) {
        return new RGBA(Object.assign({}, this.toObject(), ...src))
    }
    mergeString(...src) {
        const { r, g, b, a } = Object.assign({}, this.toObject(), ...src)
        return `rgba(${r}, ${g}, ${b}, ${a})`
    }
    toObject() {
        const { r, g, b, a } = this
        return { r, g, b, a }
    }
    fromElement(src) {
        const rgbs = window.getComputedStyle(src).backgroundColor
        this.fromString(rgbs)
    }
    fromObject(src) {
        this.setColor(src.r, src.g, src.b, src.a)
    }
    fromString(rgbs) {
        if (rgbs) {
            const v = rgbs.match(RGBA.rgbRE)
            if (v) {
                if (!v[4]) v[4] = 1
                this.setColor(...v.slice(1))
                return
            }
            const c = rgbs.match(RGBA.hexRE)
            if (c) {
                const x = [parseInt(c[1], 16), parseInt(c[2], 16), parseInt(c[3], 16)]
                if (c[4]) x[3] = parseInt(c[4], 16) / 255
                else x[3] = 1
                this.setColor(...x)
            }
        }
    }
    static toString(rgba) {
        const { r, g = 0, b = 0, a = 1 } = rgba
        return `rgba(${r}, ${g}, ${b}, ${a})`
    }
    static rgbRE = /rgba?\((\d+)\, (\d+)\, (\d+)\,? ?([\d\.]+)?\)/
    static hexRE = /#?([\da-f]{2})([\da-f]{2})([\da-f]{2})([\da-f]{0,2})/
}

const cvs = document.createElement('canvas')
const ctx = cvs.getContext('2d')
cvs.width = cvs.height = 300
const plate_img = document.getElementById('plate-img')
if (plate_img.complete) {
    initpatte()
} else {
    plate_img.onload = function () {
        initpatte()
    }
}

function initpatte() {
    const pattern = ctx.createPattern(plate_img, 'repeat');
    ctx.fillStyle = pattern
    ctx.fillRect(0, 0, 300, 300)
}

export function takeColor(x, y) {
    if (!plate_img.complete) return [0, 0, 0]
    const imageData = ctx.getImageData(x * 299, y * 299, 1, 1)
    return imageData.data
}